<template>
  <div id="user-settings">
    <!--筛选区域-->
    <GeneralFilter v-bind="filterOption" ref="filter" @searchEvent="searchEvent" @clearEvent="clearEvent"></GeneralFilter>

    <!--注册按钮-->
    <el-button type="primary" icon="el-icon-plus" @click="$refs.addDialog.show()">{{'添加' + title}}</el-button>
    <slot name="btnExpand"></slot>

    <!--注册弹出表单-->
    <AddDialog v-bind="addDialogOption" :title="title" ref="addDialog" style="margin-bottom: 10px"></AddDialog>

    <el-button id="refreshBtn" type="success" icon="el-icon-refresh" @click="refreshTable()">刷新表格</el-button>
    <!--表格-->
    <GeneralTable v-bind="tableOption" @updateEvent="updateEvent" @deleteEvent="deleteEvent"></GeneralTable>

    <!--修改弹出表单-->
    <UpdateDialog v-bind="updateDialogOption" :title="title" ref="updateDialog"></UpdateDialog>

    <!--分页组件-->
    <GeneralPage ref="page" @changeEvent="paramChange"></GeneralPage>
  </div>
</template>

<script>
import GeneralFilter from "./FilterComponent/GeneralFilter";
import AddDialog from "./DialogComponent/AddDialog";
import GeneralTable from "./TableComponent/GeneralTable";
import GeneralPage from "./PageComponent/GeneralPage";
import UpdateDialog from "./DialogComponent/UpdateDialog";

export default {
  name: 'GeneralEditTable',
  components: {
    UpdateDialog, 
    GeneralPage, 
    GeneralTable, 
    AddDialog, 
    GeneralFilter
    },
  data() {
    return {}
  },
  props: {
    title: String,
    getApi: Function,
    deleteApi: Function,

    filterOption: Object,
    addDialogOption: Object,
    tableOption: Object,
    updateDialogOption: Object,
  },
  methods: {
    // 获取表格列表
    getList(param) {
      this.getApi(param).then(result => {
        this.tableOption.tableData = result[0]
        this.$refs.page.setTotalNum(result[1])
      })
    },
    // 搜索函数
    searchEvent() {
      // 返回第一页
      this.$refs.page.setPage(1)
      this.paramChange()
    },
    // 筛选区域清空
    clearEvent() {
      // 返回第一页
      this.$refs.page.setPage(1)
      // 刷新数据
      this.paramChange()
    },
    //  表格数据更新
    refreshTable() {
      this.$refs.page.currentChange(1)
      this.paramChange()
    },
    // 根据当前搜索词、页数等参数请求数据
    paramChange() {
      this.getList( {...this.$refs.filter.getData(),...this.$refs.page.getPage(), sort: 'id', order: 'asc'})
    },
    // 修改按钮点击
    updateEvent(row) {
      this.$refs.updateDialog.show(row)
    },
    // 删除点击
    deleteEvent(row) {
      this.$confirm('此操作将永久删除该条'+ this.title +', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteApi(row).then(() => {
          this.$notify({
            title: '成功',
            type: "success",
            message: '删除' + this.title + '成功'
          })
        }).catch(error => {
          this.$notify({
            title: '失败',
            type: "error",
            message: '删除' + this.title + '失败\n' + error
          })
          console.error(error)
        })
      })
    },
    //根据类型(add,update)添加不同表单数据
    addFormData(type,data) {
      this.$refs[type+'Dialog'].addFormData(data)
    }
  },
  mounted() {
    // 获取表格列表
    this.getList({page:1,page_size:10,sort:'id',order:'asc'})
  },
}
</script>

<style scoped>
#refreshBtn {
  float: right;
  margin-right:10px;
  clear: both;
}
#paging {
  display: flex;
  justify-content: center;
}
</style>
